<template>
  <el-card>
    <div class="project-list-container">
      <div class="list-h">
        <el-button
          type="primary"
          @click="handlerAdd"
          class="add-option"
          v-auth="`/process/main--add`"
          >添加</el-button
        >
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="进度名称">
            <el-input
              v-model="formInline.progressNameLike"
              placeholder="进度名称"
              class="width-custom120"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input
              v-model="formInline.projectManageNameLike"
              placeholder="项目名称"
              clearable
              class="width-custom120"
            >
              <!-- <template #append>
                <el-button
                  icon="el-icon-plus"
                  @click="dialogVisible = true"
                ></el-button>
              </template> -->
            </el-input>
          </el-form-item>
          <el-form-item label="填报人">
            <el-input
              v-model="formInline.filledByNameLike"
              placeholder="填报人"
              class="width-custom120"
            ></el-input>
          </el-form-item>
          <el-form-item label="审批状态">
            <el-select
              v-model="formInline.approvalStatusCode"
              clearable
              placeholder="审批状态"
              class="width-custom120"
            >
              <el-option
                :key="index"
                v-for="(item, index) in APPROVE_STATUS"
                :label="item.value"
                :value="item.key"
              ></el-option>
              <!-- <el-option label="未提交" value="0"></el-option>
            <el-option label="待审批" value="1"></el-option>
            <el-option label="已审批" value="2"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
        <el-table
          :data="tableData"
          v-loading="loading"
          border
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        >
          <template #empty>
            <el-empty :image-size="150" description="暂无数据"></el-empty>
          </template>
          <el-table-column
            type="index"
            label="序号"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="billNum"
            label="进度编号"
            width="200"
          ></el-table-column>
          <!-- <el-table-column
            prop="progressName"
            label="进度名称"
            width="260"
          ></el-table-column> -->
          <el-table-column
            prop="projectManageName"
            label="项目名称"
            width="220"
          ></el-table-column>
          <!-- <el-table-column
            prop="ContractName"
            label="所属合同"
            width="220"
          ></el-table-column> -->
          <el-table-column
            prop="planStartTime"
            label="计划开始日期"
            min-width="140"
          ></el-table-column>
          <el-table-column
            prop="planEndTime"
            label="计划完成日期"
            min-width="140"
          ></el-table-column>
          <!-- <el-table-column
            prop="Version"
            label="版本号"
            width="80"
          ></el-table-column> -->
          <el-table-column
            prop="filledByName"
            label="填报人"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="filledTime"
            label="填报日期"
            width="140"
          ></el-table-column>
          <el-table-column label="审批状态" prop="approvalStatusName">
            <template #default="{ row }">
              {{ formatterStatusType(row) }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="进度状态" width="100">
            <template v-slot="scope">
              <el-button type="text" class="op-btn" :underline="false"
                >{{ scope.row.ProgressPercent }}%</el-button
              >
            </template>
          </el-table-column> -->
          <el-table-column label="操作" width="140" fixed="right">
            <template #default="{ row }">
              <!-- <el-button
                type="text"
                @click="handleEdit(scope.$index, scope.row, false)"
                >查看</el-button
              > -->
              <el-button
                type="text"
                @click="handleEdit(row)"
                v-auth="`/process/main--edit`"
                >编辑</el-button
              >
              <!-- <el-button
              v-if="scope.row.AuditStatus === '1'"
              type="text"
              class="op-btn"
              :underline="false"
              @click="handleApprove(scope.$index, scope.row)"
              >审批</el-button
            > -->

              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除该条记录吗？"
                @confirm="handleDelete(row)"
              >
                <template #reference>
                  <el-button
                    type="text"
                    v-auth="`/process/main--delete`"
                    v-showbtn="`${row.createUser}`"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <re-pagination
          v-if="total > 0"
          :total="total"
          v-model:page="formInline.pageNum"
          v-model:limit="formInline.pageSize"
          @pagination="handleSearch"
        />
      </el-skeleton>
      <el-dialog title="选择项目" v-model="dialogVisible" width="30%">
        <el-tree
          :data="projectData"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
        ></el-tree>
        <template #fotter>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="text">确 定</el-button>
        </template>
      </el-dialog>
    </div>
  </el-card>
</template>

<script lang="ts">
import RePagination from "/@/components/RePagination/index.vue";

import {
  APPROVE_STATUS_TEXT,
  APPROVE_STATUS,
  PROJECT_DATA as projectData
} from "/@/utils/globalConstant";
// import request from '@/utils/request'
import { postProgressList, postDeleteProgress } from "/@/api/flowProgress";

// change
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import NotifMessage from "/@/utils/message/notification";
import { ProcessStatusEnum } from "./types";

export default {
  components: {
    RePagination
  },
  setup() {
    let loading = ref<boolean>(false);
    let total = ref<number>(0);
    let router = useRouter();
    let formInline = reactive({
      projectManageNameLike: "",
      progressNameLike: "",
      filledByNameLike: "",
      approvalStatusCode: "",
      pageNum: 1,
      pageSize: 10
    });

    const defaultProps = reactive({
      children: "children",
      label: "label"
    });

    // const modelData = reactive();

    let tableData = ref([
      {
        PID: 1,
        ProgressNum: "HZ20210601",
        TaskName: "数据中心园区建设工程项目进度计划",
        ProjectName: "数据中心园区建设工程项目",
        ContractName: "数据中心园区建设工程项目合同",
        DateStart: "2021-05-02",
        DateEnd: "2021-06-24",
        Version: "V1.0",
        Uploader: "周方知",
        UploadTime: "2021-04-02",
        AuditStatus: "1",
        ProgressPercent: "53",
        ProcessGroup: "员工1",
        ProcessAccess: [
          {
            name: "food.jpeg",
            url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          },
          {
            name: "food2.jpeg",
            url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }
        ],
        OtherFiles: [
          {
            name: "foodOtheer.jpeg",
            url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          },
          {
            name: "food2112.jpeg",
            url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }
        ],
        Risk: "风险分析1212",
        Mark: "备注说明111"
      },
      {
        PID: 2,
        ProgressNum: "HZ20210602",
        TaskName: "数据中心园区建设工程项目进度计划",
        ProjectName: "数据中心园区建设工程项目",
        ContractName: "数据中心园区建设工程项目合同",
        DateStart: "2021-05-02",
        DateEnd: "2021-06-24",
        Version: "V1.0",
        Uploader: "周方知",
        UploadTime: "2021-05-02",
        AuditStatus: "0",
        ProgressPercent: "53",
        ProcessGroup: "员工1",
        ProcessAccess: [],
        OtherFiles: [],
        Risk: "风险分析1212",
        Mark: "备注说明2222222"
      },
      {
        PID: 3,
        ProgressNum: "HZ20210603",
        TaskName: "数据中心园区建设工程项目进度计划3",
        ProjectName: "数据中心园区建设工程项目3",
        ContractName: "数据中心园区建设工程项目合同3",
        DateStart: "2021-05-02",
        DateEnd: "2021-06-24",
        Version: "V1.0",
        Uploader: "周方知",
        UploadTime: "2021-05-02",
        AuditStatus: "2",
        ProgressPercent: "0",
        ProcessGroup: "员工1",
        ProcessAccess: [],
        OtherFiles: [],
        Risk: "风险分析1212",
        Mark: "备注说明2222222"
      }
    ]);

    let dialogVisible = ref(false);

    const handlerAdd = (): void => {
      router.push("/process/main/detail");
    };

    // const getCheckedKeys = (): void => {
    //   // 取data的id, 作为筛选条件
    //   const selectIdArr = (vm.refs.tree as any).getCheckedNodes();
    //   if (selectIdArr.length) {
    //     const item = selectIdArr[0];
    //     formInline.ProjectName = item.label; // 赋值给input
    //   }
    //   dialogVisible.value = false;
    // };

    const handleSearch = (): void => {
      getTableData(formInline);
    };

    const handleEdit = (item: any): void => {
      // const name = isEdit ? "ProcessEdit" : "ProcessView";
      // router.push({ name, params: { item, isEdit: isEdit.toString() } });
      router.push({
        path: "/process/main/detail",
        query: { mode: "edit", id: item.id }
      });
    };

    // const handleApprove = (index: number, item: any): void => {
    //   item.AuditStatus = 2;
    //   successMessage("审批成功");
    // };

    const handleDelete = async item => {
      try {
        const { code, message } = await postDeleteProgress({ id: item.id });
        if (code === 200) {
          // successMessage(`${message}`);
          NotifMessage.success(message);
          getTableData(formInline);
        } else {
          // errorMessage(`${message}`);
          NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    };

    const getTableData = async (obj: object = {}) => {
      loading.value = true;
      try {
        const { code, data } = await postProgressList(obj);
        if (code === 200) {
          tableData.value = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    };

    const formatterStatusType = row => {
      return ProcessStatusEnum[Number(row.approvalStatusCode)].label;
    };

    getTableData(formInline);

    return {
      APPROVE_STATUS_TEXT,
      APPROVE_STATUS,
      loading,
      total,
      projectData,
      formInline,
      defaultProps,
      // modelData,
      tableData,
      dialogVisible,
      handlerAdd,
      // getCheckedKeys,
      handleSearch,
      handleEdit,
      // handleApprove,
      handleDelete,
      formatterStatusType
    };
  }
};
</script>
